<template>
	<div class="cmt-container">
		<h3>发表评论</h3>
		<hr>
		<!--评论区-->
		<textarea placeholder="请输入内容(最多输入120个字)"></textarea>
		<mt-button type="primary" size="large">发表评论</mt-button>
		<!--评论列表-->
		<div class="cmt-list" v-for="(item,i) in comments" :key="item.add_time">
			<div class="cmt-item">
				<div class="cmt-title">
					第{{i+1}}楼	 用户：{{item.user_name}}   发表时间：{{item.add_time|dataFormat}}
				</div>
				<div class="cmt-body">
					{{item.content ==='undefined'?'此用户很懒，什么都没留下':item.content}}
				</div>			
			</div>	
			
		</div>
		<mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
	</div>
</template>

<script>
	import {Toast} from 'mint-ui'
	export default{
		data(){
			return{				
				comments:[],//所有的评论数据
				pageIndex: 1//默认显示当前第1页		
			}
		},		
		created(){
			this.getComments()
		},
		methods: {
			getComments(){//获得评论数据
				this.$http
				.get("api/getcomments/" +this.id+ "?pageindex="+this.pageIndex)
					.then(result=>{
						if(result.body.status===0){
							//this.comments=result.body.message
							//每次请求数据时,不要把老数据清空,而是把老数据和新数据拼接在一起  concat()
							this.comments=this.comments.concat(result.body.message)
							console.log(this.comments)
						}else{
							Toast("获取评论数据失败")
						}
				})				
			},
			getMore(){//加载更多 事件
				this.pageIndex++;
				this.getComments()
			}
			
		},
		props:['id']
		
	}
</script>

<style lang="less" scoped>
	.cmt-container{
		padding: 5px;
		h3{	
			text-align: left;		
		    font-size: 14px;
		}
		textarea{
			height:70px;
			font-size: 12px;
		}
		.cmt-list{
			.cmt-item{
				margin:10px 0px;
				.cmt-title{
					background: #bdbdbd6e;
					text-align: left;
					font-size: 12px;
					margin-bottom: 10px;
				}
				.cmt-body{
					text-align: left;
					font-size: 14px;
				}
			}
			
		}
		
	}
</style>